<script setup>
import { ref } from 'vue'
import { VideoPlay } from '@element-plus/icons-vue';
const searchDishInfo = ref({
  title: '',
  categoryId: '',
  status: ''
})

const onSubmit = () => {
  console.log('submit!')
}
const clear = () => {

}

//新增 --批量删除
const addDish = () => {

}
const delDishes = () => {

}
//操作表格
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const tableData = ref([
  {
    id: 1,
    title: "当归生姜羊肉汤",
    imageUrl: "https://tse3-mm.cn.bing.net/th/id/OIP-C.v7tmYWYYkzinN89v_53nqgHaEL?w=284&h=180&c=7&r=0&o=7&cb=thfc1&pid=1.7&rm=3",
    description: '定位：小腿外侧，犊鼻下3寸。功效：健脾和胃',
    categoryId: "《金匮要略》",
    videoUrl: "/src/assets/haha.mp4",
    viewCount: 666,
    praiseCount: 342,
    status: '草稿',
    createTime: "2024-01-15 08:30:45",
    updateTime: "2024-03-20 14:25:18"
  },
]);


// 控制对话框显示/隐藏
const dialogVisible = ref(false);
// 存储当前要播放的视频地址
const currentVideoUrl = ref('');

// 点击封面时触发的方法
const handleVideoPlay = (videoUrl) => {
  currentVideoUrl.value = videoUrl; // 设置当前视频链接
  dialogVisible.value = true;       // 打开对话框
};

// 关闭对话框时暂停视频
const handleClose = () => {
  dialogVisible.value = false;
  currentVideoUrl.value = ''; // 清空视频链接，下次打开会重新加载
};
</script>
<template>
  <PageContainer title="生活锻炼">
    <!-- 头部--表单 -->
    <div class="container">
      <el-form :inline="true" :model="searchDishInfo" class="demo-form-inline">
        <el-form-item label="文章标题">
          <el-input v-model="searchDishInfo.title" placeholder="请输入文章标题" clearable />
        </el-form-item>
        <el-form-item label="文章状态">
          <el-select v-model="searchDishInfo.status" placeholder="请选择文章状态" clearable>
            <el-option label="草稿" value="0" />
            <el-option label="发布" value="1" />
            <el-option label="下架" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增、批量删除按钮-->
    <div class="container">
      <el-button type="primary" @click="addDish">+ 新增文章</el-button>
      <el-button type="info" @click="delDishes">- 批量删除</el-button>
    </div>
    <!-- 表格 -->
    <div class="container">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="selection" width="46" align="center" />
        <el-table-column label="id" width="56" type="index" align="center">
        </el-table-column>
        <el-table-column label="文章标题" width="100" prop="title" align="center">
        </el-table-column>
        <el-table-column label="文章封面" width="145" prop="imageUrl" align="center">
          <template #default="scope">
            <img :src="scope.row.imageUrl" width="66px">
          </template>
        </el-table-column>
        <el-table-column label="文章内容" width="200" prop="description" align="center">
        </el-table-column>
        <el-table-column label="文章视频" width="120" prop="videoUrl" align="center">
          <template #default="scope">
            <!-- 使用视频元素本身作为封面 -->
            <div style="display: flex;justify-content: center;">
              <div class="video-poster" @click="handleVideoPlay(scope.row.videoUrl)">
                <video :src="scope.row.videoUrl" width="120" height="75"
                  style="border-radius: 4px; object-fit: cover; cursor: pointer;" preload="metadata"
                  ref="videoRef"></video>
                <!-- 播放图标叠加在封面上 -->
                <div class="play-icon">
                  <el-icon>
                    <VideoPlay />
                  </el-icon>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="浏览次数" width="85" prop="viewCount" align="center">
        </el-table-column>
        <el-table-column label="点赞次数" width="85" prop="praiseCount" align="center">
        </el-table-column>
        <el-table-column label="文章状态" width="85" prop="status" align="center">
        </el-table-column>
        <el-table-column label="发布时间" width="160" prop="createTime" align="center">
        </el-table-column>
        <el-table-column label="更新时间" width="160" prop="updateTime" align="center">
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template #default="scope">
            <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button type="danger" plain @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 20, 30]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="100" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        style="margin-top: 20px;justify-content: start;" />

      <!-- 视频播放对话框 -->
      <el-dialog v-model="dialogVisible" title="视频播放" width="50%" :before-close="handleClose">
        <video :src="currentVideoUrl" controls autoplay style="width: 100%;"></video>
      </el-dialog>
    </div>
  </PageContainer>
</template>

<style lang="scss" scoped>
.container {
  margin: 10px 0;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.video-poster {
  position: relative;
  /* 为播放图标定位提供参考 */
  display: inline-block;
  cursor: pointer;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 居中 */
  color: #fff;
  font-size: 30px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  opacity: 0.8;
  transition: opacity 0.3s;
}

.video-poster:hover .play-icon {
  opacity: 1;
  /* 鼠标悬停时图标更清晰 */
}
</style>
